<template>
<ul class="nav nav-tabs nav-stacked panel panel-default" id="sub-nav">
  <li class="panel-heading text-center">
    <h4>{{page.title}}</h4></li>
  <li v-for="content in page.contents" class="text-left">
    <router-link :to="{ path:$route.path,query :{section:content.id}}">
      <h5>{{ content.name }}</h5></router-link>
  </li>
</ul>
</template>

<script>
export default {
  name: 'Sidebar',
  props: ['page'],
  data() {
    return {}
  },
  methods: {},
  created() {
    $(function() {
      $('#sub-nav').affix({
        offset: {
          top: 125
        }
      });
    });
  }
}
</script>
<style>
ul.nav-tabs {
  margin-top: 20px;
  border-radius: 4px;
  border: 1px solid #ddd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}

ul.nav-tabs li {
  margin: 0;
  border-top: 1px solid #ddd;
}

ul.nav-tabs li:first-child {
  border-top: none;
}

ul.nav-tabs li a {
  margin: 0;
  padding: 8px 16px;
  border-radius: 0;
}

ul.nav-tabs li.active a,
ul.nav-tabs li.active a:hover {
  color: #fff;
  background: #0088cc;
  border: 1px solid #0088cc;
}

ul.nav-tabs li:first-child a {
  border-radius: 4px 4px 0 0;
}

ul.nav-tabs li:last-child a {
  border-radius: 0 0 4px 4px;
}

ul.nav-tabs.affix {
  top: 30px;
  /* Set the top position of pinned element */
}
</style>
